<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .box{
            width: 1000px;
            margin: 100px auto;
            display: flex;
            position: relative;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            
        }
        ul .pingjia{
            position: absolute;
            border: 1px solid orangered;
            width: 120px;
            left: 60px;
            top: 20px;
            font-size: 12px;
            display: none;
        }
        li{
             margin: 0 3px; 
        }
        ul>li{
          
            background: url(star.png);
            width: 19px;
            height: 19px;
        }
        ul .star{
            background-position: 0 -28px;
        }
      
    </style>
</head>
<body>
  <div class="box">
      <span>宝贝与描述相符</span>
      <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <span class="pingjia"></span>
      </ul>
      <div class="result"></div>
  </div>
<script src="jquery.js"></script>
</body>
</html>
<script>

   var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];

    // 展示星星
    // count 星星的个数

    function showStar(count){
        $('li').each(function(index){
            if(index<count){
                $(this).addClass('star');
                // console.log(index)
            }else{
                $(this).removeClass('star');
            }
        })
    }
    
    var score = 0;
    $('li').hover(function(){
        showStar($(this).index()+1);
        $('.pingjia').show();
        var left = this.offsetLeft - 50;
        $('.pingjia').css('left', left);
        var amsg = msg[$(this).index()];
        $('.pingjia').html("<strong style='color:red'>" + ($(this).index()+1) + '分'
               + amsg.split('|')[0]  + "</strong>" + '<br>' + amsg.split('|')[1]);

        $('li').click(function(){
            showStar($(this).index()+1);
            score = $(this).index()+1;
            var amsg = msg[$(this).index()];
            $('.result').html("<strong style='color:red'>" + ($(this).index()+1) + '分'
               +  "</strong>"  + amsg.split('|')[1]);
        })
        
    },function(){
        showStar(score);
        $('.pingjia').hide();
    })

</script>